<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
    <button>GET请求</button>
    <button>POST请求</button>
    <button>PUT请求</button>
    <button>DELETE请求</button>
</body>
<script type="text/javascript">
    const btns = document.getElementsByTagName("button");

    //get请求
    btns[0].onclick = function (){
        axios({
            method:"GET",
            url:"http://localhost:3000/posts"
        }).then(response =>{
            console.log(response);
        })
    }

    //post请求
    btns[1].onclick = function (){
        axios({
            method:"POST",
            url:"http://localhost:3000/posts",
            data:{
                title:"阿杰迟到了",
                author:"Pounds",
            }
        }).then(response =>{
            console.log(response);
        })
    }

    //put请求（更新）
    btns[2].onclick = function (){
        axios({
            method:"DELETE",
            url:"http://localhost:3000/posts/4",
            data:{
                title:"阿杰没有迟到",
                author:"Pounds",
            }
        }).then(response =>{
            console.log(response);
        })
    }

    //delete请求
    btns[3].onclick = function (){
        axios({
            method:"DELETE",
            url:"http://localhost:3000/posts/5",
        }).then(response =>{
            console.log(response);
        })
    }
</script>
</html>